import { Grid } from '@arco-design/web-react';
import { ReactNode } from 'react';
const Row = Grid.Row;

interface Props {
  className?: string;
  title?: string;
  showTitle?: boolean;
  children?: ReactNode;
  titleRightNode?: ReactNode;
}

export default function DetailCard({ className, title, showTitle = true, children, titleRightNode }: Props) {
  return (
    <div className={`detail-card ml-20 mr-20 ${className}`}>
      {(showTitle || titleRightNode) && (
        <div className="detail-card-title">
          <div className="line-dot" />
          <div className="font-16 flex-1">{title}</div>
          {titleRightNode}
        </div>
      )}
      <Row className="pl-20 pt-20 pr-20">{children}</Row>
    </div>
  );
}
